<template>
  <a-modal
    :visible="visible"
    :closable="false"
    :width="740"
    :footer="null"
  >
    <a-row :wrap="false">
      <a-col class="remind">
        <div>
          <p class="remind-title">到期提醒</p>
          <a-divider style="height: 2px; background-color: #bbbbbb" />
          <p class="remind-text">
            尊敬的客户您好，您的企业已于
            {{ $store.getters.orgInfo.account.overdue_time }}
            到期，请联系您的专属服务顾问购买使用，为您的楼宇资产保驾护航！
          </p>
        </div>
        <a-space>
          <a-button @click="logOut">退出登录</a-button>
          <a-button
            v-if="config.can_reg_org"
            @click="switchEnterprises"
            type="primary"
          >切换企业</a-button
          >
        </a-space>
      </a-col>
      <a-col align="middle">
        <div>
          <img src="../../../common/images/common/remind_qrcode.png" />
        </div>
        <div class="remind-qrcode">
          <img :src="$store.getters.basicConfig.plat_service_qrcode" />
        </div>
        <div>
          <cu-icon class="icon" type="org-kefu1"></cu-icon>
        </div>
        <div class="text-phone">咨询热线</div>
        <div class="phone">
          {{ $store.getters.basicConfig.plat_service_phone }}
        </div>
      </a-col>
    </a-row>

    <!-- <p style="margin-top: 30px; font-size: 16px; font-weight: 700">
      咨询热线：{{ $store.getters.basicConfig.plat_service_phone }}
    </p>
    <p>
      <img
        style="width: 170px; height: 170px"
        :src="$store.getters.basicConfig.plat_service_qrcode"
        alt="客服二维码"
      />
    </p> -->

    <!-- 切换企业 -->
    <ChangeCompany :visible="companyVisible" @close="companyClose" />
  </a-modal>
</template>
<script>
import {
  computed,
  defineComponent,
  createVNode, ref,
} from "vue";
import { Modal } from "ant-design-vue";
import {
  ExclamationCircleOutlined,
} from "@ant-design/icons-vue";
import utils from "@/common/utils/utils";
import store from "@/store";
import ChangeCompany from "@/layouts/commonModules/SettingModal/modules/ChangeCompany.vue";


export default defineComponent({
  name: "ExpireRemind",
  props: {
    visible: {
      type: Boolean,
      default: false,
    }
  },
  components: {
    ChangeCompany
  },
  setup() {

    const config = computed(() => store.getters.basicConfig);
    // 退出登录
    const logOut = () => {
      Modal.confirm({
        title: () => "提示",
        icon: () => createVNode(ExclamationCircleOutlined),
        content: () => "确定退出登录吗？",
        onOk() {
          utils.clearStorage();
          setTimeout(() => {
            location.replace(location.origin + location.pathname);
          }, 200);
        },
      });
    };
    // 切换企业
    const companyVisible = ref(false);
    const switchEnterprises = () => {
      companyVisible.value = true;
    };

    const companyClose = () => {
      companyVisible.value = false;
    };


    return {
      logOut,
      config,
      companyVisible,
      switchEnterprises,
      companyClose,
    };
  },
});
</script>

<style lang="less" scoped>
.remind {
  width: 500px;
  margin-right: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .remind-title {
    font-size: 24px;
    font-weight: 600;
    color: #000;
  }
  .remind-text {
    font-size: 15px;
  }
}
.remind-qrcode {
  width: 105px;
  height: 105px;
  border: 4px solid #000;
  img {
    width: 100%;
    height: 100%;
  }
}
.icon {
  margin-top: 10px;
  font-weight: 700;
  font-size: 28px;
}
.text-phone {
  font-size: 16px;
  font-weight: 700;
}
.phone {
  font-size: 20px;
  font-weight: 700;
}
</style>